<template>
  <div class="container" id="app">
    <div class="middle_box">
      <el-form ref="fm" :model="fm" class="login_form">
        <el-form-item prop="phone" :rules="{required: true, message: '请输入手机号'}">
          <el-input type="text" v-model="fm.phone" placeholder="手机号" icon="fa-user" autofocus></el-input>
        </el-form-item>
        <el-form-item prop="code" :rules="{required: true, message: '请输入验证码'}">
          <el-input type="text" v-model="fm.code" placeholder="验证码" icon="fa-lock" autofocus>
            <el-button slot="append" @click="send">{{tip}}</el-button>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" :rules="{required: true, message: '请输入密码'}">
          <el-input type="password" v-model="fm.password" placeholder="密码" icon="fa-lock" autofocus></el-input>
        </el-form-item>
        <el-form-item prop="password2" :rules="{required: true, message: '请输入密码'}">
          <el-input
            type="password"
            v-model="fm.password2"
            placeholder="确认密码"
            icon="fa-lock"
            autofocus
          ></el-input>
        </el-form-item>
        <el-button type="primary" @click="register" class="mybtn">注 册</el-button>
        <el-button @click="login" type="text">已有账号？去登陆</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
let Base64 = require("js-base64").Base64;
import API from "../../utils/Api";
export default {
  data() {
    return {
      fm: {},
      tip: "发送验证码"
    };
  },
  methods: {
    register() {
      let self = this;
      this.$refs["fm"].validate(d => {
        if (d) {
          if (!self.fm.cid) {
            this.$message({
              message: "请验证手机号",
              type: "error"
            });
          } else if (self.fm.password2 != self.fm.password) {
            this.$message({
              message: "两次密码不一致",
              type: "error"
            });
          } else if (self.fm.password.length < 8) {
            this.$message({
              message: "密码长度要大于8位",
              type: "error"
            });
          } else {
            API.auth.register(self.fm, res => {
              if (res.code === 200) {
                this.$message({
                  message: "注册成功",
                  type: "success"
                });
                self.$router.push("/login");
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            });
          }
        } else {
          self.$message({
            type: "warning",
            message: "请完善信息在提交"
          });
        }
      });
    },
    send() {
      var phoneReg = /^1[3-578]\d{9}$/;
      if (!phoneReg.test(this.fm.phone)) {
        this.$alert("请输入正确的手机号", "错误提示");
      } else {
        // 发送验证码
        API.auth.smsCode({ phone: this.fm.phone }, res => {
          if (res.code === 200) {
            this.tip = "验证码已发送";
            this.fm.cid = res.data; //短信记录ID
            this.$message({
              message: "验证码发送成功",
              type: "success"
            });
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        });
      }
    },
    login() {
      this.$router.push("/login");
    }
  }
};
</script>
<style>
.middle_box {
  width: 500px;
  padding: 60px;
  background-color: #ffffff;
  border-radius: 3px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login_form {
  width: 100%;
}

.mybtn {
  width: 100%;
}
</style>
<style scoped>
#app {
  background-image: url("../../assets/imgs/bg.png");
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>